<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<style type="text/css">
		ul{display: flex}
		ul li{flex:1; background: #ccc; list-style: none;text-align: center;}
		.tclass{ background: #990000}
	</style>
	<script type="text/javascript">
		var loading = false;
		$(window).scroll(function(){
		 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		      if(loading == false){
		           loading = true;
		           $('#loadingbar').css("display","block");
		           $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
		                $('body').append(loaded);
		                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
		                $('#loadingbar').css("display","none");
		                loading = false;
		           });
		      }
		 }
		});

		$(document).ready(function() {
		 	$('#loaded_max').val(50);
		});
	</script>
</head>
<body>
	<div>导航菜单背景切换效果</div>
	<ul id='nav'>
	    <li>导航一</li>
	    <li>导航二</li>
	    <li>导航三</li>
	</ul>
</body>
</html>